<template>
  <div ref="containerRef" class="common-page edit">
    <div class="common-scrollbar full">
      <title-view title="在册信息" icon="item-register"></title-view>
      <div class="common-item-view">
        <t-row :gutter="[0, 16]">
          <t-col v-for="(item, index) in baseInfolist" :key="index" :span="item.key === 'desc' ? 12 : 4">
            <div class="item">
              <div class="label" style="width: 100px">{{ item.label }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </t-col>
        </t-row>
      </div>
      <t-form ref="formRef" :data="formData" :colon="true" :label-width="100" label-align="left">
        <div class="custom-wrap">
          <div class="left">
            <title-view title="自定义参数配置" icon="item-register"></title-view>
            <svg-icon class="custom-icon" name="item-questionMark"></svg-icon>
          </div>
          <div class="right">
            <svg-icon class="custom-icon" name="item-dataInfo02"></svg-icon>
            <t-link
              theme="primary"
              style="margin-left: 8px; font-size: 11px; line-height: 14px; margin-bottom: 10px; margin-right: 24px"
              underline
              >重置参数</t-link
            >
          </div>
        </div>
        <div class="common-item-view">
          <t-row :gutter="[0, 30]">
            <t-col v-for="(item, index) in customList" :key="index" :span="12">
              <div class="item">
                <div class="label custom-label" style="width: 100px">{{ item.label }}</div>
                <div class="value custom-value">
                  <div class="slider-label" style="margin-right: 10px">{{ item.min }}</div>
                  <t-slider
                    class="slider-wrap"
                    v-model:value="item.value"
                    :label="true"
                    :min="item.min"
                    :max="item.max"
                  />
                  <div class="slider-label" style="margin-left: 15px">{{ item.max }}</div>
                </div>
              </div>
            </t-col>
          </t-row>
        </div>
      </t-form>
    </div>

    <div class="common-footer">
      <t-button theme="default" variant="outline" @click="handleCancel">取消</t-button>
      <t-button theme="primary" @click="handelSubmit">保存</t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { tryit } from 'radash';
import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import mockApi from '@/api/mock';
import { SmartData, ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useLoading } from '@/hooks/useLoading';
import { setKvViewData } from '@/utils';

import { INIT_DATA, INIT_FORM_LIST_INFO, CUSTOM_list } from './datas/edit';

const route = useRoute();
const router = useRouter();

const containerRef = ref<HTMLDivElement>();
const baseInfolist = ref(_.cloneDeep(INIT_FORM_LIST_INFO));
const customList = ref(_.cloneDeep(CUSTOM_list));
const formData = ref({ ...INIT_DATA });
const detailData = ref<ResultItem>();
const formRef = ref<FormInstanceFunctions>();

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  const baseInfoData = {
    name: '人脸识别',
    authorization: 1,
    version: 'v1.0.0',
    dataInfo: '算法支持人脸识别、人形识别、人脸对比',
    desc: 'IPC-1001',
  };
  const cutomData = {
    min_px: 200,
    confidence: 60,
    score: 20,
    matching: 30,
    proportion: 50,
    interval: 40,
  };
  baseInfolist.value = setKvViewData(baseInfolist.value, { ...data, ...baseInfoData });
  detailData.value = _.cloneDeep(data);
  formData.value = { ...cutomData };
  customList.value = setKvViewData(customList.value, { ...data, ...cutomData });
};

const getData = async () => {
  const id = route.query.id as string;
  if (!id) return;
  loadingStart();
  const [err, res] = await tryit(mockApi.info)({ id });
  if (!err && res.code === SUCCESS_CODE) setData(res.data);
  loadingEnd();
};

const handleCancel = () => {
  router.go(-1);
};

const handelSubmit = async () => {
  const validateRes = await formRef.value.validate();

  if (validateRes === true) {
    loadingStart();

    const SmartData: SmartData = { ...formData.value };
    const id = detailData.value?.id;
    const api = id ? mockApi.update : mockApi.create;

    if (id) SmartData.id = id;

    const [err, res] = await tryit(api)(SmartData);

    if (!err && res.code === SUCCESS_CODE) {
      await MessagePlugin.success('操作成功');
      handleCancel();
    }

    loadingEnd();
  }
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.custom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    display: flex;
    align-items: center;
  }

  .custom-icon {
    margin-left: 13px;
    margin-bottom: 10px;
  }
}
.custom-label {
  text-align: end;
  margin-right: 36px;
}
.custom-value {
  display: flex;
  .slider-label {
    display: inline-block;
    height: 18px;
    color: #333333;
    font-size: 12px;
    line-height: 18px;
    padding: 0 5px;
    background-color: #d2e1fc;
    border-radius: 3px;
  }
  .slider-wrap {
    width: 410px;
    height: 10px;
    :deep(.t-slider__rail) {
      height: 10px;
      background-color: #f0f2f4;
      .t-slider__track {
        height: 100%;
      }
    }
  }
}
</style>
